<template>
  <div class="aistart-report">
    <div class="top-nav"></div>
    <div class="main-content">
      <section class="left-main">
        <div class="list-box">
          <div class="value-item target-energy">
            <div class="target-value-desc">
              <div class="values-box">0%</div>
              <div class="item-desc">AI节能</div>
            </div>
          </div>
          <div class="value-item">
            <h3 class="item-name">站厅</h3>
            <div class="item-value-desc">
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.ZTWD }}</span>
                  <i>℃</i>
                </span>
                <p class="item-desc">温度</p>
              </div>
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.ZTSD }}</span>
                  <i>%</i>
                </span>
                <p class="item-desc">湿度</p>
              </div>
            </div>
          </div>
          <div class="value-item">
            <h3 class="item-name">站台</h3>
            <div class="item-value-desc">
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.ZTAWD }}</span>
                  <i>℃</i>
                </span>
                <p class="item-desc">温度</p>
              </div>
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.ZTASD }}</span>
                  <i>%</i>
                </span>
                <p class="item-desc">湿度</p>
              </div>
            </div>
          </div>
          <div class="value-item">
            <h3 class="item-name">外气</h3>
            <div class="item-value-desc">
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.WQHZ }}</span>
                  <i>kj/kg</i>
                </span>
                <p class="item-desc">焓值</p>
              </div>
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.WQWD }}</span>
                  <i>℃</i>
                </span>
                <p class="item-desc">湿球温度</p>
              </div>
            </div>
          </div>
          <div class="value-item">
            <h3 class="item-name">实时制冷量</h3>
            <div class="item-value-desc">
              <div class="values-box">
                <span class="item-value">
                  <span>{{ topitemdata && topitemdata.SSZLL }}</span>
                  <i>kW</i>
                </span>
                <p class="item-desc">制冷量</p>
              </div>
            </div>
          </div>
        </div>
        <div class="detail-box">
          <div class="warp">
            <ul class="ul-item">
              <li
                class="li-item li-item2"
                v-for="(item, index) in lsjStatedata"
                :key="index"
              >
                <div class="cold-img"></div>
                <div class="num-item">{{ item.name }}</div>
                <div class="run-time-item">
                  <span class="span1"></span>
                  <span class="span2">运行时间</span>
                  <span class="span3">{{ item.Bt || "--" }}h</span>
                </div>
                <div class="detail-desc">
                  <div class="top01">
                    <div class="ss">
                      <span class="ss1"></span>
                      <span class="ss2">当前</span>
                      <span class="ss3"></span>
                      <span class="ss8">AI推荐</span>
                    </div>

                    <div class="ss">
                      <span class="ss1">状态</span>
                      <span class="ss2">
                        <span v-if="item.Status == 1">ON</span>
                        <span v-else-if="item.Status == 0">OFF</span>
                        <span v-else>--</span></span
                      >
                      <span class="ss3"><span class="arrow-icon"></span></span
                      ><span class="ss4"
                        ><span class="bg-text">
                          <span v-if="item.Status == 1">ON</span>
                          <span v-else-if="item.Status == 0">OFF</span>
                          <span v-else>--</span></span
                        ></span
                      >
                    </div>

                    <div class="ss">
                      <span class="ss1">负荷率</span>
                      <span class="ss2">{{ item.LrH || "--" }} %</span>
                      <span class="ss3"><span class="arrow-icon"></span></span
                      ><span class="ss4"
                        ><span class="bg-text"
                          >{{ item.LrH || "--" }} %</span
                        ></span
                      >
                    </div>
                  </div>
                  <p class="is-check">继续保持！</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <section class="right-main">
        <div class="aistart-analysis myscroll">
          <div
            class="cop-echarts"
            v-for="(item, index) in copChartlist"
            :key="index"
          >
            <div class="cop-name">
              {{ item.name }}
            </div>
            <div class="chart-box">
              <Vechart
                class="option"
                :options="testLine(item.valueList)"
              ></Vechart>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>
<script>
import Vechart from "../../components/charts/Vcharts";

export default {
  name: "AistartComponent",
  props: ["topitemdata", "lsjStatedata", "copChartlist"],
  components: {
    Vechart,
  },
  data() {
    return {};
  },
  methods: {
    testLine(data) {
      var sin = Math.sin;
      var cos = Math.cos;
      var pow = Math.pow;
      var sqrt = Math.sqrt;
      var cosh = Math.cosh;
      var sinh = Math.sinh;
      var PI = Math.PI;
      var aa = 0.4;
      var r = 1 - aa * aa;
      var w = sqrt(r);

      return {
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "cross",
          },
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {},
          },
        },
        backgroundColor: "#03091b",
        visualMap: {
          show: false,
          dimension: 0,
          min: 0,
          max: 1800,
          inRange: {
            color: [
              "rgba(168,172,249,0.6)",
              "rgba(130,103,191,0.6)",
              "rgba(160,82,164,0.8)",
              "rgba(190,247,212,0.6)",
              "rgba(215,237,192,0.6)",
              "rgba(246,143,137,0.6)",
            ],
          },
        },
        xAxis3D: {
          type: "value",
          name: "负荷比",
          nameTextStyle: {
            fontSize: "0.1rem",
          },
          axisLabel: {
            color: "#84BFDD",
            fontSize: "0.08rem",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#84BFDD",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0B2564",
            },
          },
        },
        yAxis3D: {
          type: "value",
          name: "入口温度",
          nameTextStyle: {
            fontSize: "0.1rem",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#84BFDD",
            },
          },
          axisLabel: {
            color: "#84BFDD",
            fontSize: "0.08rem",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0B2564",
            },
          },
        },
        zAxis3D: {
          type: "value",
          name: "cop",
          nameTextStyle: {
            fontSize: "0.1rem",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#84BFDD",
            },
          },
          axisLabel: {
            color: "#84BFDD",
            fontSize: "0.08rem",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0B2564",
            },
          },
        },
        grid3D: {
          viewControl: {
            projection: "orthographic",
          },
        },
        series: [
          {
            type: "surface",
            wireframe: {
              show: false,
              lineStyle: {
                color: "#0B2564",
                opacity: 0.8,
                width: 1,
              },
            },
            zlevel: -10,
            dataShape: [4, 5],
            data: data,
          },
        ],
      };
    },
  },
};
</script>
<style lang="less" scoped>
.aistart-report {
  width: 100%;
  height: 100%;
  .top-nav {
    width: 10rem;
    height: 0.41rem;
  }
  .main-content {
    width: 10rem;
    height: calc(100% - 0.5rem);
    position: relative;
    display: flex;
    .left-main {
      width: 68%;
      height: 100%;
      .list-box {
        width: 100%;
        height: 160px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        // background-color: #647184;
        .value-item {
          width: 200px;
          height: 120px;
          margin: 0 10px;
          background: linear-gradient(
            0deg,
            rgba(2, 51, 90, 0.32),
            rgba(2, 27, 46, 0.32)
          );
          opacity: 0.8;
          // border: 1px solid #2ab2ff;
          border-radius: 6px;
          .item-name {
            text-align: center;
            // margin: 5px 0 20px 0;
            height: 35px;
            font-size: 18px;
            font-weight: 400;
            color: #84bfdd;
            line-height: 28px;
          }
          .item-value-desc {
            display: flex;
            width: 100%;
            height: 65px;
            // background-color: #fff;
            font-size: 18px;
            .values-box {
              width: 100%;
              height: 80px;
              // background-color: #3fa843;
              text-align: center;
              .item-value {
                font-size: 18px;
                padding: 8px 0;
                color: #ffffff;
                i {
                  font-size: 18px;
                }
              }
              .item-desc {
                color: #84bfdd;
                // background-color: #fff;
                padding: 12px 0;
                line-height: 22px;
                font-size: 14px;
              }
            }
          }
        }
        .target-energy {
          width: 160px;
          height: 160px;
          background: url("../../assets/img/sc.png") no-repeat center;
          background-size: cover;
          .target-value-desc {
            text-align: center;
            height: 160px;
            .values-box {
              font-size: 30px;
              color: #2ae185;
              font-weight: bold;
              width: 100%;
              height: 80px;
              line-height: 106px;
            }
            .item-desc {
              height: 80px;
              line-height: 32px;
              width: 100%;
              font-size: 20px;
              color: #2ae185;
              font-weight: bold;
            }
          }
        }
      }
      .detail-box {
        width: 100%;
        height: calc(100% - 160px);
        // background: #664e4e;
        .warp {
          width: 100%;
          height: 100%;
          margin: 0 auto;
          overflow: hidden;
          ul {
            list-style: none;
            padding: 0;
            margin: 0 auto;
            &.ul-item {
              display: flex;
              .li-item {
                width: 420px;
                height: 720px;
                padding-left: 14px;

                color: #fff;
                text-align: center;
                font-size: 30px;
              }
              .li-item2 {
                padding-left: 40px !important;
              }
            }
          }
          .num-item {
            height: 30px;
            font-size: 30px;
            font-weight: bold;
            color: #fefefe;
            line-height: 24px;
          }
          .cold-img {
            width: 100%;
            height: 35%;
            background: url("../../assets/img/run-icon.png") no-repeat center
              center;
            background-size: contain;
          }
          .run-time-item {
            width: 100%;
            height: 8%;
            display: flex;
            justify-content: center;
            align-items: center;
            .span1 {
              width: 24px;
              height: 24px;
              line-height: 24px;
              background: url("../../assets/img/run-title.svg") no-repeat center;
            }
            .span2 {
              color: #84bfdd;
              font-size: 24px;
              margin: 0 20px;
              // background-color: #fceb28;
            }
            .span3 {
              color: #fceb28;
              font-size: 24px;
            }
          }
          .detail-desc {
            width: 380px;
            margin: 0 auto;
            height: 45%;
            background: url("../../assets/img/k-x.png") no-repeat top center;
            background-size: 100% 100%;
            .top01 {
              height: 84%;
              margin-top: 6px;
              padding-top: 20px;
              display: flex;
              flex-direction: column;
              .ss {
                flex: 1;
                display: flex;
                align-items: center;
                font-size: 18px;
                .ss1 {
                  width: 30%;
                  display: flex;
                  justify-content: center;
                }
                .ss2 {
                  width: 20%;
                  display: flex;
                  justify-content: center;
                }
                .ss3 {
                  width: 20%;
                  display: flex;
                  justify-content: center;
                  .arrow-icon {
                    display: inline-block;
                    width: 26px;
                    height: 20px;
                    background: url("../../assets/img/jt.svg") no-repeat top
                      center;
                    background-size: cover;
                  }
                }
                .ss4 {
                  width: 30%;
                  height: 52px;
                  line-height: 35px;
                  // background-color: #fff;
                  .bg-text {
                    display: inline-block;
                    margin-top: -12px;
                    width: 100%;
                    height: 100%;
                    background-color: #fff;
                    background: url("../../assets/img/s.png") no-repeat center
                      center;
                    background-size: 80%;
                  }
                }
                .ss8 {
                  width: 30%;
                }
              }
            }
            .desc-title {
              width: 138px;
              height: 30px;
              font-size: 20px;
              margin: 0 auto;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #fefefe;
              line-height: 24px;
              text-align: center;
              background: linear-gradient(0deg, #3b98d9 0%, #3ce69c 100%);
              background-clip: text;
              -webkit-text-fill-color: transparent;
            }
            .category-title {
              display: flex;
              justify-content: center;
              align-items: center;
              margin: 10px 0;
              span {
                width: 100%;
                padding-left: 32px;
                height: 30px;
                color: #84bfdd;
                font-size: 20px;
                text-align: center;
              }
              .now {
                text-align: right;
              }
            }
            .is-check {
              height: 21px;
              font-size: 20px;
              font-weight: 400;
              color: #0074b6;
              line-height: 24px;
            }
          }
        }
      }
    }
    .right-main {
      width: 32%;
      height: 100%;
      display: flex;
      justify-content: space-around;
      //   background-color: #fff;
      .aistart-analysis {
        width: 100%;
        height: 100%;

        font-size: 20px;
        padding-right: 20px;
        color: #fff;
        overflow: hidden;
        overflow-y: auto;
        .cop-echarts {
          width: 100%;
          height: 45.5%;
          margin-bottom: 1%;
          // background-color: #3c5561;
          .cop-name {
            width: 100%;
            height: 10%;
            // text-align: center;
            // background-color: #442727;
          }
          .chart-box {
            width: 98%;
            height: 90%;
            margin: 0 auto;
          }
        }
      }
    }
  }
}
</style>
